<!-- v2.0版本之前 -->
<template>
  <view class="dynamicCard">
    <!-- 骨架图 -->
    <template v-if="loading">
      <view v-for="(el,index) in skeletons" :key="index" class="dynamicItem">
        <!-- 用户信息 -->
        <view v-if="type==1" class="userContent justify-between items-center">
          <view class="user flex-row items-center">
            <view class="avatar skeleton animate-skeleton"></view>
            <view class="nickname skeleton animate-skeleton"></view>
          </view>
        </view>
        <!-- 标题描述 -->
        <view class="descContent descContent-skeleton skeleton animate-skeleton"></view>
        <!-- 视频流封面 -->
        <view class="videoContent">
          <view class="coverImage coverImage-skeleton skeleton animate-skeleton"></view>
        </view>
        <!-- 帮卖人数展示 -->
        <view v-if="type!=4" class="helpContent">
          <view class="helpNum justify-between">
            <!-- <view class="commission commission-skeleton skeleton animate-skeleton"></view>-->
            <view class="num num-skeleton skeleton animate-skeleton"></view>
          </view>
          <view class="helpUser">
            <view v-for="sub in 5" :key="sub" class="helpUserItem helpUserItem-skeleton skeleton animate-skeleton"></view>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <view v-for="(el,index) in list" :key="index" class="dynamicItem">
        <!-- 用户信息 -->
        <view v-if="type==1" class="userContent justify-between items-center" @click.stop="goHomePage(el)">
          <view class="user flex-row items-center communityName_box">
            <image :src="el.communityLogo || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" class="avatar image_box"/>
            <text class="nickname">{{el.communityName}}</text>
          </view>
          <view v-if="el.followStatus===0&&!el.isMyself" class="followBtn" @click.stop="_handleAttention(el)">关注</view>
        </view>
        <!-- 视频流整体的点击区域 -->
        <view @click.stop="_goVideo(el.dynamicId)">
          <!-- 标题描述 -->
          <text class="descContent">{{el.title||el.content}}</text>
          <!-- 视频流封面 -->
          <view class="videoContent">
            <view class="coverImage">
              <view class="coverBgColor"></view>
              <view class="coverBgImage" :style="{backgroundImage:`url(${el.thumbnail})`}"></view>
              <image :src="el.thumbnail" lazy-load mode="aspectFill" class="image" />
            </view>
            <image src="https://image.qqpyyds.com/mpAppImg/icon/video-player-icon1.png" class="player-icon" />
            <!-- 商品 -->
            <view v-if="el.isGroup===2" class="shopContent">
              <image :src="el.mainImage" mode="aspectFill" class="shopCover" />
              <view class="priceContent">
                <text>￥</text>
                <text class="price">{{el.minSalePrice || 0.0}}</text>
              </view>
            </view>
            <view v-if="type==2||type==4" class="tagContent">
              <!-- 隐藏 -->
              <view v-if="el.openStatus===2" class="openStatus-icon">
                <i class="iconfont icon-hind1" />
              </view>
              <!-- 置顶 -->
              <view v-if="el.isUserTop===1" class="userTop">置顶</view>
              <!-- 已结束 -->
              <!-- <view v-if="_isEnd(el.endTime,el.isGroup)" class="endStatus">已结束</view>-->
            </view>
          </view>
          <!-- 帮卖人数展示 -->
          <view class="helpContent">
            <view v-if="_hasCommission(el)" class="helpNum justify-between">
              <!--  &lt;!&ndash; 佣金区间展示 &ndash;&gt;-->
              <!--  <view v-if="el.maxCommission&&el.maxCommission>0&&el.maxCommission!==el.minCommission" class="commission">-->
              <!--    帮卖赚￥{{el.minCommission}}~{{el.maxCommission}}-->
              <!--  </view>-->
              <!--  &lt;!&ndash; 最小佣金为0，最大佣金不为0且不为null展示最大佣金 &ndash;&gt;-->
              <!--  <view v-else-if="el.minCommission===0&&el.maxCommission" class="commission">帮卖赚￥{{el.maxCommission}}</view>-->
              <!--  &lt;!&ndash; 展示最小佣金 &ndash;&gt;-->
              <!--  <view v-else class="commission">帮卖赚￥{{el.minCommission}}</view>-->
              <view class="num">{{el.helpSellCount>0?`已有${el.helpSellCount}人正在帮卖`:'帮卖正在赶来'}}</view>
            </view>
            <!-- 仅展示帮卖社群 -->
            <view v-else-if="isLogin&&el.helpSellCount>0&&el.isCanInvite===1" class="helpNum justify-end">
              <view class="num">{{`已有${el.helpSellCount}人正在帮卖`}}</view>
            </view>
            <!-- 跟团记录--4帮卖团长不显示 -->
            <view v-if="el.buyLogRespVOList&&el.buyLogRespVOList.length&&type!=4" class="helpUser">
              <view
                  v-for="(sub,uIn) in el.buyLogRespVOList"
                  :key="uIn"
                  class="helpUserItem justify-between"
              >
                <view class="left flex-row items-center">
                  <text>{{sub.followGroupNum}}</text>
                  <image :src="sub.avatar || 'https://image.qqpyyds.com/mpAppImg/icon/avatar2_icon.png'" mode="aspectFill" class="helpAvatar" />
                  <text class="helpName">{{sub.nickname}}</text>
                  <text class="skuName">{{sub.skuName}}</text>
                  <text class="shopNum">*{{sub.count}}</text>
                </view>
                <view class="right">{{_formatDate(sub.buyTime)}}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="footerContent justify-between">
          <view class="left">
            <!-- 已登录 -->
            <template v-if="isLogin">
              <!-- 有跟团记录即展示 -->
              <text v-if="el.buyLogRespVOList.length">正在跟团中</text>
              <!-- isGroup 1无商品2有商品(团) -->
              <text v-else-if="el.isGroup==2">一大群人正赶来跟团</text>
            </template>
            <!-- 游客 -->
            <text v-else>一大群人正赶来跟团</text>
          </view>
          <view class="right">
            <!-- 已登录 -->
            <template v-if="isLogin">
              <!-- 可帮卖的团 -->
              <template v-if="el.helpSellStatus===1">
                <!--  <view class="btn plainBtn" @click.stop="_handleSkip(2, el)">编辑帮卖</view>-->
                <view class="btn fillBtn" @click.stop="_handleSkip(4, el, index)">
                  <!-- 佣金区间展示 -->
                  <template v-if="el.maxCommission&&el.maxCommission>0&&el.maxCommission!==el.minCommission">
                    <text>帮卖赚￥</text>
                    <text class="fz-16">{{el.minCommission}}</text>
                    <!--  <text class="fz-16">{{splitPrice(el.minCommission).x}}</text>-->
                    <!--  <text>{{splitPrice(el.minCommission).y}}</text>-->
                    <text>~</text>
                    <text class="fz-16">{{el.maxCommission}}</text>
                    <!-- <text class="fz-16">{{splitPrice(el.maxCommission).x}}</text>-->
                    <!-- <text>{{splitPrice(el.maxCommission).y}}</text>-->
                  </template>
                  <!-- 最小佣金为0，最大佣金不为0且不为null展示最大佣金 -->
                  <template v-else-if="el.minCommission===0&&el.maxCommission">
                    <text>帮卖赚￥</text>
                    <text class="fz-16">{{el.maxCommission}}</text>
                    <!-- <text class="fz-16">{{splitPrice(el.maxCommission).x}}</text>-->
                    <!-- <text>{{splitPrice(el.maxCommission).y}}</text>-->
                  </template>
                  <!-- 展示最小佣金 -->
                  <template v-else>
                    <text>帮卖赚￥</text>
                    <text class="fz-16">{{el.minCommission||0}}</text>
                    <!--  <text class="fz-16">{{splitPrice(el.minCommission).x}}</text>-->
                    <!--  <text>{{splitPrice(el.minCommission).y}}</text>-->
                  </template>
                  <!--  <text>帮卖赚</text>-->
                  <view v-if="el.loadingBtn" class="loadingWrap">
                    <u-loading mode="flower" size="28" />
                  </view>
                </view>
              </template>
              <!-- 自己的团，可再邀请购买状态 -->
              <template v-else-if="el.isCanInvite===1">
                <view class="btn plainBtn" @click.stop="_handleSkip(1, el)">分享</view>
                <view class="btn fillBtn" @click.stop="_handleSkip(3, el)">邀请帮卖</view>
              </template>
              <!-- 不可帮卖展示分享按钮 &&(type==1||type==3) -->
              <template v-else-if="el.helpSellStatus===0">
                <view class="btn plainBtn" @click.stop="_handleSkip(1, el)">分享</view>
              </template>
            </template>
            <!-- 游客 -->
            <template v-else>
              <view class="btn plainBtn" @click.stop="_handleSkip(1, el)">分享</view>
            </template>
          </view>
        </view>
        <!-- 订单-->
        <!-- <view v-if="el.orderTotalPrice" class="orderContent justify-between">-->
        <!--   <view class="item sell">-->
        <!--     <view class="number">{{el.orderTotalPrice||0}}</view>-->
        <!--     <view class="unit">销售金额(元)</view>-->
        <!--   </view>-->
        <!--   <view class="item order">-->
        <!--     <view class="number">{{el.orderCount||0}}</view>-->
        <!--     <view class="unit">订单数(单)</view>-->
        <!--   </view>-->
        <!-- </view>-->
      </view>
    </template>
    <!-- <u-toast ref="uToast" />-->
  </view>
</template>

<script>
import Util from '@/api/util.js'
// import { splitPrice } from '@/utils/common.js'
import dynamic from '@/api/dynamic.js'
export default {
  name: 'dynamicCard',
  props: {
    type: {
      type: [Number, String],
      default: 1
    },// 区分哪个入口：1首页、2社群首页、3TA的个人社群主页、4帮卖团长、5供货团长
    list: {
      type: Array,
      required: true
    },
    minusHeight: {
      // 主盒子需要减去的高度
      type: Number,
      default: 0
    },
    // 加载骨架图数量
    skeletons: {
      type: Number,
      default: 1
    },
    // 骨架图加载
    loading: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    filterTop() {
      const systemObj = this.$store.state.globalData
      return systemObj.navHeight + 5
    },
    item() {
      return this.$store.state.followTypeObj
    },
  },
  watch: {
    // 监听某个视频流的关注、置顶、隐藏状态改变
    item: {
      handler: function (nVal) {
        this.updateItem(nVal)
      },
      deep: true
    }
  },
  methods: {
    // 关注--传递事件
    _handleAttention(item) {
      dynamic.follow({ followAccountId: item.accountId, isFollow: 1 }).then(res => {
        if (res.code === 200) {
          item.followStatus = 1
          this.updateItem(item)
          uni.showToast({
            icon: 'none',
            mask: true,
            title: '关注成功！'
          })
        }
      })
      // 需要传递事件放开此注释
      // this.$emit('attention', item)
    },
    // 按钮组
    // type: 1--分享，2--编辑帮卖，3--邀请帮卖，4--一键帮卖
    _handleSkip(type, item, index) {
      switch (type) {
        case 1:
          // if ((this.type == 2 || this.type == 4) && this._isEnd(item.endTime,item.isGroup)) {
          //   return this.$refs.uToast.show({ title: '该团已结束！'})
          // }
          this.$emit('groupBtn', {item, type: 0}) // 分享
          break
        // case 2:
        //   this.navigateTo({url: `/pagesA/release/issueEdit?dynamicId=${item.dynamicId}&operateType=1&isHelpSell=1`}) // 编辑帮卖
        //   break
        case 3:
          // if ((this.type == 2 || this.type == 4) && this._isEnd(item.endTime,item.isGroup)) {
          //   return this.$refs.uToast.show({ title: '该团已结束！'})
          // }
          this.$emit('groupBtn', {item, type: 2}) // 邀请帮卖
          break
        case 4:
          if (item.loadingBtn) return
          // if ((this.type == 2 || this.type == 4) && this._isEnd(item.endTime,item.isGroup)) {
          //   return this.$refs.uToast.show({ title: '该团已结束！'})
          // }
          this.$set(this.list[index], 'loadingBtn', 'true')
          this.$emit('groupBtn', {item, type: 1}) // 一键帮卖
          break
      }
    },
    // 更新某一项的关注、帮卖等数据
    updateItem(item) {
      for (let i = 0, length = this.list.length; i < length; i++) {
        const sub = this.list[i]
        if (sub.accountId === item.accountId) {
          sub.followStatus = item.followStatus
          // 此处不能清空--因为有两处需要用到--清空在另外一处监听不到
          // this.$store.commit('FOLLOW_TYPE', null)
          // break
        }
      }
    },
    goHomePage(item){
      let routes = getCurrentPages()
      let pageUrlArr = ['pagesB/personalCenter/homePage']
      if (pageUrlArr.length>=2&&pageUrlArr.includes(routes[routes.length-2].route)) {
        this.navigateBack({
          delta: 1
        })
        return
      }
      this.navigateTo({url: `/pagesB/personalCenter/homePage?accountId=${item.accountId}`});
    },
    // 格式化时间
    _formatDate(time) {
      return Util.showTime(time, 1)
    },
    // 是否展示佣金函数
    _hasCommission(item) {
      const { isGroup, minCommission, maxCommission, helpSellStatus } = item
      if (this.isLogin && this.type != 4 && isGroup == 2 && (minCommission !== null || maxCommission > 0) && helpSellStatus == 1) {
        return true
      }
      return false
    },
    // 跳转视频流
    _goVideo(dynamicId){
      const { query } = this.getRoute()
      if(this.type == 5){
        this.navigateTo({url: `/pagesB/dynamic/videoDetail?dynamicId=${dynamicId}&groupAccountId=${query.groupAccountId}`})
      }else if(this.type == 4){
        this.navigateTo({url: `/pagesB/dynamic/videoDetail?dynamicId=${dynamicId}&headAccountId=${query.headAccountId}`})
      }else if(this.type == 3 || this.type == 2){
        this.navigateTo({url: `/pagesB/dynamic/videoDetail?dynamicId=${dynamicId}&accountId=${query.accountId || ''}&type=3`})
      }else{
        this.navigateTo({url: `/pagesB/dynamic/videoDetail?dynamicId=${dynamicId}&type=1`})
      }
    },
    // 切割价格
    // splitPrice
    // 团是否已结束,isGroup === 2 为团，否则为动态
    // _isEnd(endTime,isGroup){
    //   return new Date() >= new Date(endTime) && isGroup === 2
    // }
  }
}
</script>

<style lang="scss" scoped>
.dynamicCard {
  width: 100%;
  height: 100%;
  padding: 24rpx 24rpx 0;
  background-color: #F7F8FA;
  .dynamicItem {
    padding: 24rpx 24rpx 16rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.1);
    box-sizing: border-box;
    background-color: #ffffff;
    .userContent {
      margin-bottom: 24rpx;
    }
    .communityName_box {
      flex: 1;
    }
    .avatar {
      width: 64rpx;
      height: 64rpx;
      margin-right: 16rpx;
      border-radius: 50%;
      flex: 0 0 auto;
    }
    .nickname {
      min-width: 200rpx;
      height: 40rpx;
      color: $n8Color;
      @include bov(1)
    }
    .followBtn {
      flex: 0 0 auto;
      width: 104rpx;
      height: 48rpx;
      border-radius: 32rpx;
      color: #FFFFFF;
      font-size: 24rpx;
      line-height: 48rpx;
      text-align: center;
      background-color: $themeColor;
    }
    .descContent {
      margin: 0 0 16rpx;
      @include bov(2);
      font-size: 28rpx;
      line-height: 40rpx;
      color: $n8Color;
    }
    .descContent-skeleton {
      width: 100%;
      height: 80rpx;
    }
    .videoContent {
      position: relative;
    }
    .coverImage {
      position: relative;
      width: 100%;
      height: 358rpx;
      margin-bottom: 24rpx;
      border-radius: 16rpx;
      overflow: hidden;
      .coverBgColor {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
        background: rgba(0, 0, 0, .5);
      }
      .coverBgImage {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 16rpx;
        background-size: contain;
        filter: blur(24rpx);
      }
      .image {
        position: absolute;
        top: -6rpx;
        left: 0;
        z-index: 3;
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        border-radius: 16rpx;
      }
    }
    .coverImage-skeleton {
      background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
      background-size: 400% 100%;
    }
    .player-icon {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      z-index: 4;
      width: 76rpx;
      height: 76rpx;
    }
    .shopContent {
      position: absolute;
      left: 16rpx;
      bottom: 16rpx;
      z-index: 3;
      width: 164rpx;
      height: 220rpx;
      border-radius: 8rpx;
      background-color: #ffffff;
      .shopCover {
        width: 100%;
        height: 160rpx;
        border-radius: 8rpx;
      }
      .priceContent {
        text-align: center;
        color: $themeColor;
        font-size: 24rpx;
        .price {
          font-size: 28rpx;
        }
      }
    }
    .tagContent {
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      z-index: 4;
      display: flex;
      .endStatus{
        width: 72rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 20rpx;
        border-radius: 4rpx;
        box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
        background-color: #F2F3F5;
        margin-left: 8rpx;
      }
    }
    .openStatus-icon {
      width: 72rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 20rpx;
      color: $n8Color;
      border-radius: 4rpx;
      box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
      background-color: #F2F3F5;
      margin-right: 8rpx;
      .iconfont {
        color: $n8Color;
      }
    }
    .userTop {
      width: 72rpx;
      height: 40rpx;
      line-height: 40rpx;
      text-align: center;
      font-size: 24rpx;
      border-radius: 4rpx;
      box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.2);
      background-color: $themeColor;
      color: #FFFFFF;
    }
    .helpContent {
      .helpNum {
        margin-bottom: 20rpx;
      }
      //.commission {
      //  padding: 4rpx 12rpx;
      //  border-radius: 4rpx;
      //  font-size: 24rpx;
      //  color: #ffffff;
      //  background: #FB9551;
      //}
      //.commission-skeleton {
      //  width: 200rpx;
      //  height: 32rpx;
      //  background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
      //  background-size: 400% 100%;
      //}
      .num {
        color: #FB9551;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .num-skeleton {
        width: 300rpx;
        height: 32rpx;
        border-radius: 4rpx;
      }
      .helpUser {
        padding-top: 4rpx;
      }
      .helpUserItem {
        margin-bottom: 16rpx;
        padding: 0 8rpx;
        color: $n6Color;
        font-size: 24rpx;
        .helpAvatar {
          min-width: 48rpx;
          width: 48rpx;
          height: 48rpx;
          margin: 0 16rpx;
          border-radius: 50%;
        }
        .helpName {
          margin-right: 16rpx;
          color: $n8Color;
        }
        .skuName {
          max-width: calc(100% - 220rpx);
          @include bov(1)
        }
        .shopNum {
          color: #FB9551;
        }
        .left {
          flex: auto;
        }
        .right {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          min-width: 140rpx;
          color: #C8C9CC;
        }
      }
      .helpUserItem-skeleton {
        width: 100%;
        height: 32rpx;
      }
    }
    .footerContent {
      height: 80rpx;
      line-height: 80rpx;
      .left {
        font-size: 24rpx;
        color: $n6Color;
      }
      .btn {
        box-sizing: border-box;
        display: inline-block;
        padding: 8rpx 16rpx;
        border-radius: 32rpx;
        border: 2rpx solid $themeColor;
        font-size: 24rpx;
        line-height: 32rpx;
      }
      .plainBtn {
        color: $themeColor;
      }
      .fillBtn {
        color: #ffffff;
        background-color: $themeColor;
        margin-left: 16rpx;
      }
      .loadingWrap {
        display: inline-block;
        margin-left: 6rpx;
      }
    }
    .orderContent {
      padding-bottom: 32rpx;
      .item {
        width: 50%;
        text-align: center;
        color: #000000;
      }
      .number {
        font-size: 32rpx;
        line-height: 44rpx;
      }
      .unit {
        font-size: 24rpx;
        line-height: 32rpx;
      }
    }
  }
  .skeleton {
    background: linear-gradient(90deg, #F1F2F4 25%, #e6e6e6 37%, #F1F2F4 50%);
    background-size: 400% 100%;
  }
  .animate-skeleton {
    animation: animate-skeleton 1.8s ease infinite
  }
}
@keyframes animate-skeleton {
  0% {
    background-position: 100% 50%
  }

  100% {
    background-position: 0 50%
  }
}
</style>